import React from 'react'
import { Row, Col, Input, Button, List } from 'antd'

const TodoListUI = (props) =>{
  return (
    <div style={{ marginTop: '10px', marginLeft: '10px' }}>
      <Row>
        <Col span={3}>
          <Input
            style={{ margin: '0 10px 10px 0' }}
            value={props.inputValue}
            onChange={props.handleChangeInput}
          ></Input>
          <Button
            type="primary"
            onClick={props.handleAddTodoItem}
          >
            点击以下呗
            </Button>
        </Col>
        <Col span={9}>
          <List
            header={<div>Header</div>}
            footer={<div>Footer</div>}
            bordered
            dataSource={props.list}
            renderItem={(item, index) => (
              <List.Item
                onClick={() => {
                  props.handleReduceTodoItem(index)
                }}
              >
                {item}
              </List.Item>
            )}
          />
        </Col>
      </Row>
    </div>
  )
}
export default TodoListUI